<%--
  Created by IntelliJ IDEA.
  User: asd73
  Date: 2017/9/23
  Time: 15:07
  To change this template use File | Settings | File Templates.
--%>
<%--自定义动画轨迹--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <style type="text/css">
        div { width: 100px; height: 100px; background: pink;
            position: absolute;
            left:0;
            top: 200px;}
    </style>
    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript">
        $(function () {
            $('button').click(function () {
                //\$('div').animate({'left':'500px'},1000);//{}中为参数属性与属性值，只能为数值型的属性值，1000为动画时间
                //$('div').animate({'left':'500px','top':'500px'},1000);//一个animate里面既有向右又有向下，那就是对角线移动
                //$('div').animate({'left':'500px'},500).delay(1000).animate({'top':'500px'},500);//分开两个animate就变成分段运动，中间加延时就是停顿
                //$('div').hide().slideDown();
                //用自定义动画模拟slidown效果
                $('div').css('height','0px').animate({'height':'100px'},500);
                //$('div').css('left':'500px')
            });
        })
    </script>
</head>
<body>
    <button>动画</button>
    <div></div>
</body>
</html>
